<template>
<div>
  <!-- 顶部面包屑标识与导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }">
      <i class="el-icon-s-promotion"></i> 后台管理
    </el-breadcrumb-item>
    <el-breadcrumb-item>SPU台账</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

  <!-- 数据表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="80" align="center"
                     :show-overflow-tooltip="true"></el-table-column>
    <el-table-column label="封面图片" width="100" align="center">
      <template slot-scope="scope">
        <el-image
            style="width: 80px; height: 80px"
            :src="JSON.parse(scope.row.pictures)[0].url"
            fit="fit"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="brandName" label="品牌" width="60" align="center"
                     :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="categoryName" label="类别" width="80" align="center"
                     :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="name" label="商品" width="150" align="center"
                     :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <div>[{{ scope.row.typeNumber }}]</div>
        <div>{{ scope.row.name }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="title" label="商品标题" align="center"
                     :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="listPrice" label="售价" width="80" align="center"></el-table-column>
    <el-table-column prop="stock" label="库存" width="80" align="center"></el-table-column>
    <el-table-column prop="sales" label="销量" width="80" align="center"></el-table-column>
    <el-table-column label="好评/评论" width="100" align="center">
      <template slot-scope="scope">
        <div>{{ scope.row.positiveCommentCount }}</div>
        <div>/</div>
        <div>{{ scope.row.commentCount }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序序号" width="80" align="center"></el-table-column>
    <el-table-column label="发布" width="70" align="center">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" content="如需发布，请点击【审核】按钮进行审核，任何修改都会导致发布状态改为【未发布】" placement="top">
          <span v-if="scope.row.isPublished == 1" style="color: #67c23a">已发布</span>
          <span v-else style="color: #F56C6C">未发布</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column label="新品" width="60" align="center">
      <template slot-scope="scope">
        <el-switch
            @change="toggleNewArrival(scope.row)"
            v-model="scope.row.isNewArrival"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#cccccc">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="推荐" width="60" align="center">
      <template slot-scope="scope">
        <el-switch
            @change="toggleRecommend(scope.row)"
            v-model="scope.row.isRecommend"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#cccccc">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="SKU管理" width="120" align="center">
      <template slot-scope="scope">
        <el-button @click="gotoSkuManagement(scope.row)">SKU管理</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="160" align="center">
      <template slot-scope="scope">
        <el-button class="op_button" @click="openCheckDialog(scope.row)">审核</el-button>
        <el-button class="op_button" @click="openShowInfoDialog(scope.row)">查看</el-button>
        <el-button class="op_button" @click="openEditDialog(scope.row)">编辑</el-button>
        <el-button class="op_button danger" @click="openDeleteConfirm(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页控件 -->
  <div style="margin: 10px 0; text-align: right;">
    <el-pagination
        @current-change="changePage"
        :hide-on-single-page="true"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>

  <!-- 显示SPU详情的对话框 -->
  <el-dialog class="spu-info" :title="spuInfo.name" :visible.sync="infoDialogVisible">
    <el-descriptions :column="1" border label-class-name="spu-info-label">
      <el-descriptions-item label="数据ID">
        3
        <el-tooltip class="item" effect="dark" content="此数据不会显示在普通用户界面" placement="right">
          <sup><i class="el-icon-info"></i></sup>
        </el-tooltip>
      </el-descriptions-item>
      <el-descriptions-item label="类别">{{ spuInfo.categoryName }}</el-descriptions-item>
      <el-descriptions-item label="品牌">{{ spuInfo.brandName }}</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ spuInfo.name }}</el-descriptions-item>
      <el-descriptions-item label="货号">{{ spuInfo.typeNumber }}</el-descriptions-item>
      <el-descriptions-item label="标题">{{ spuInfo.title }}</el-descriptions-item>
      <el-descriptions-item label="简介">{{ spuInfo.description }}</el-descriptions-item>
      <el-descriptions-item label="计件单位">{{ spuInfo.unit }}</el-descriptions-item>
      <el-descriptions-item label="售价">{{ spuInfo.listPrice }} 元</el-descriptions-item>
      <el-descriptions-item label="销量">{{ spuInfo.sales }}</el-descriptions-item>
      <el-descriptions-item label="库存">{{ spuInfo.stock }}</el-descriptions-item>
      <el-descriptions-item label="库存阈警值">{{ spuInfo.stockThreshold }}</el-descriptions-item>
      <el-descriptions-item label="关键词">{{ spuInfo.keywords }}</el-descriptions-item>
      <el-descriptions-item label="标签">{{ spuInfo.tags }}</el-descriptions-item>
      <el-descriptions-item label="排序序号">{{ spuInfo.sort }}</el-descriptions-item>
      <el-descriptions-item label="商品图片">
        <el-image class="picture-item"
                  v-for="picture in JSON.parse(spuInfo.pictures)"
                  :key="picture.id"
                  :src="picture.url"
                  fit="cover"></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="商品详情"><span v-html="spuInfo.detail"></span></el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="infoDialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: 20,
      pageCount: 1,
      total: 0,
      // SPU详情
      spuInfo: {
        pictures: '[]'
      },
      // 显示SPU详情的对话框的可见性
      infoDialogVisible: false,
    };
  },
  methods: {
    // 跳转到SKU管理页
    gotoSkuManagement(spu) {
      this.$router.push('/sys-admin/product/spu-management/sku-list?spuId=' + spu.id);
    },

    // 切换分页
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadSpuList();
    },
    // 加载SPU列表
    loadSpuList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = 'http://localhost:9180/spu?page=' + page;
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('localJwt');
      console.log(localJwt);
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    }
  },
  mounted() {
    this.loadSpuList();
  }
}

</script>

<style>
.op_button {
  width: 50px;
  margin: 5px 6px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}

.danger {
  background: #F56C6C;
  color: #fff;
}

.danger:hover {
  background: #f92d2d;
  color: #fff;
}

.spu-info {
}

.spu-info .spu-info-label {
  width: 120px;
}

.spu-info .picture-item {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  margin-bottom: 10px;
  border-radius: 3px;
  float: left;
}
</style>